import React, { useEffect, useState } from "react";
import "./index.css";
import { SearchBar, Card, Image } from "antd-mobile";
import { Tabs } from "react-vant";
import http from "../../api/http";
import { BellOutline } from 'antd-mobile-icons'
import {useNavigate} from "react-router-dom"
function Index() {
  const navigate=useNavigate()
  const [list, setList] = useState([]);
  const getlist = async () => {
    const res = await http.get("/api/list");
    const { code, data } = res.data;
    // console.log(data)
    if (code === 200) {
      setList(data);
    }
  };
  useEffect(() => {
    getlist();
  }, []);
  return (
    <div>
      <div onClick={()=>navigate("/city")}>
        <span>你的位置</span>
        <h3>北京市</h3>
      </div>
    {/* 8.实现首页功能
8-1.将位置选择页选择的城市信息，渲染在首页
8-2.实现顶部展览的tab切换，并高亮显示当前项 */}
      <div className="nanzhong" onClick={()=>navigate("/text")}>
        <BellOutline />
        <div className="dian">

        </div>
      </div>
      {/* 有新消息通知到的时候，右上角铃铛图标，带有红色的点，表示有新消息待查看 */}
      <SearchBar placeholder="搜索" />
      <div className="tabs">
        <Tabs border type="capsule">
          <Tabs.TabPane key="1" title="全部">
            <Card
              title="即将展开"
              // 12.实现展览列表页功能
// 12-1.首页即将开展右侧查看更多点击跳转到列表页，列表页展示展览列表，并实现列表触底加载更多
              extra={<a onClick={()=>navigate("/list")}>查看所有</a>}
              style={{
                background: "#fffbfbff",
                overflow: "hidden",
              }}
            >
              <div  className="box">
                <Card
                  style={{
                    background: "#f3f1f1ff",
                    marginRight: "10px",
                  }}
                >
                  {list?.map((item, ind) => (
                    <div key={ind}>
                      <Image
                        src={item.image}
                        width="400px"
                        height="300px"
                       
                        style={{ marginRight: "10px", background: "#ded2d2ff" }}
                      />

                      <div className="text">
                        <p>厘清地平线上的艺术魅力：视觉创意集聚的未来空间</p>

                        <div className="wenbrn">
                          <p>杭州市</p> <p>{item.title}</p> <p>{item.price}</p>
                        </div>
                      </div>
                    </div>
                  ))}
                </Card>
              </div>
            </Card>
          </Tabs.TabPane>
          <Tabs.TabPane key="2" title="音乐会">
            音乐会
          </Tabs.TabPane>
          <Tabs.TabPane key="3" title="研讨会">
            研讨会
          </Tabs.TabPane>
          <Tabs.TabPane key="4" title="剧院">
            剧院
          </Tabs.TabPane>
        </Tabs>
      </div>
    </div>
  );
}

export default Index;
